<template>
	<view :style="'color:'+shallowColor" class="community-index">
		<headers v-if="heads" @custom-event="customevent" @searchclick="e=>searchs=e" @searchclear="searchs=''">
		</headers>
		<view :class="screen?'community':'community contentOs'" style="display: flex;">
			<asides :asideW="asideW" :aside="aside"></asides>
			<view class="content-index">
				<el-aside width="70px" style="border-right: 1px solid #ccc;">
					<view v-for="(item,index) in data" :key="JSON.stringify(item)">
						<view @click="clickSS(index)" :class="checked==index ?'ites checkes':'ites'">
							{{item.name}}
						</view>
					</view>
				</el-aside>
				<view class="dialogue">
					<view style="margin: 10px;display: flex;">
						<uv-input style="height: 20px;" prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入内容" border="surround"
							v-model="inputValue"></uv-input>
						<el-button @click="" size="small" style="margin-left: 10px;" icon="el-icon-plus"></el-button>
					</view>
					<view v-for="(item,index) in dialogue" :key="JSON.stringify(item)+index">
						<view @click="clickSS(index)" :class="checked==index ?'item checked':'item'">
							<view style="width: 100%;display: flex;justify-content: space-between;padding: 10px;">
								<view style="display: flex;">
									<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff"
										shape="square"></uv-avatar>
									<view style="margin-left: 5px;">
										<view style="font-size: 15px;color:#666;">
											{{item.name}}
										</view>
										<view style="font-size: 12px;color:#999;">
											{{item.des}}
										</view>
									</view>
								</view>
								<view class="">
									<view style="font-size: 12px;color: #CCC;">
										{{$uv.timeFormat(item.createdAt,'yyyy-mm-dd hh:MM:ss') }}
									</view>
									<view style="font-size: 12px;color: #CCC;">
										{{$uv.timeFormat(item.updatedAt,'yyyy-mm-dd hh:MM:ss')}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbars :prop-value="1"></tabbars>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import config from '@/common/config';
	import waterfall from '@/components/waterfall/waterfall.vue';
	import headers from '@/components/header/header.vue';
	import asides from '@/components/aside/aside.vue';
	import {
		like,
		getName
	} from '@/common/api.js';
	import {
		date
	} from '../../uni_modules/uv-ui-tools/libs/function/test';
	export default {
		components: {
			// 注册组件
			tabbars,
			headers,
			asides,
			waterfall,
		},
		props: {
			heads: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				shallowColor: '#808080',
				aside: true,
				asideW: 60,
				checked: -1,
				data: [{
					name: "对话",
					en: 'dialogue'
				}, {
					name: "消息",
					en: 'message'
				}, {
					name: "关注",
					en: 'follow'
				}, {
					name: "粉丝",
					en: 'fans'
				}, {
					name: "社媒",
					en: 'socialMedia'
				}, {
					name: "项目",
					en: 'project'
				}],
				dialogue: [{
					name: '红色游记文章',
					des: '红色游记文章说明',
					createdAt: new Date("2025-09-05T08:39:08.705Z"),
					updatedAt: new Date(),
				}, {
					name: '红色游记文章',
					des: '红色游记文章说明',
					createdAt: new Date("2025-09-05T08:39:08.705Z"),
					updatedAt: new Date(),
				}],
				diaCon: [{
						"role": "user",
						"content": "在？"
					},
					{
						"role": "assistant",
						"content": "在的！有什么我可以帮助你的吗？",
						"quota": "0.000764"
					}
				],
				message: [],
				follow: [],
				fans: [],
				socialMedia: [],
				project: [],
				aa: new Date(),
				textarea: '',
				// textarea: '——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————',
				inputValue: ''
				// tabbar: config.tabbar,
				// scrollTop: 0,
				// deepColor: '#4D4D4D',
				// lightColor: '#ccc',
				// cindex: -1,
				// sindex: -1,
				// searchs: '',


				// tips: [],
				// clientHeight: null,
				// tag: '',
				// tagMore: false,
				// more: false,
				// tabbarChecked: -1,
				// tabbarsValue: '',
				// assortShow: true,
				// assort_name: null,
				// assort: [{}],
				// socialValue: '',
				// social: null,
				// socialIndex: [],
				// selected: [],
				// opShow: false,
			}
		},
		watch: {
			// tabbarValue(newVal, oldVal) {
			// 	if(this.isPc) this.aside = !this.aside;
			// },
		},
		mounted() {
			if (!this.isPc) { // 针对桌面平台（Windows和Mac）
				this.aside = false;
				this.asideW = 0;
			}
			const res = uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(80);
				}
			});
			getName('hottags', {
				custom: {
					auth: true,
					toast: false
				},
				params: {
					date: uni.$uv.date(new Date().getTime(), 'yyyy-mm-dd')
				}
			}).then(e => {
				if (e) {
					this.tips = e;
				}
			}).catch(e => {});
		},
		methods: {
			clickSS(a) {
				this.checked = a;
				if (!this.isPc) {
					this.routed('pages/community/dialogue');
				}
			},
			// loadMore(e) {
			// 	this.$refs.waterfall.loadMore();
			// },
			// handleScroll(e) {
			// 	this.scrollTop = e?.detail.scrollTop
			// 	const that = this; // 保存组件实例的引用
			// 	// uni.$uv.debounce(() => that.scrollTop = e?.detail.scrollTop, console.log(e), 300);
			// },
			// clickTop() {
			// 	var that = this;
			// 	let timess = setInterval(function() {
			// 		let num = parseInt(that.scrollTop / 50);
			// 		if (num < 1) num = 1;
			// 		that.scrollTop = that.scrollTop - num;
			// 		if (that.scrollTop < 1) clearInterval(timess);
			// 		// console.log(that.scrollTop);
			// 	}, 1);
			// },
			customevent(e) {
				this.aside = e;
				if (e) {
					this.asideW = 60;
				} else {
					this.asideW = 0;
				}
			},
			clickContent(e) {
				if (e.url) this.routed(e.url);
			},
			routed(url = '') {
				if (!url) return;
				uni.$uv.route({
					url: url
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	@import 'element-ui/lib/theme-chalk/display.css';

	body {
		overflow: hidden;
		/* 允许垂直滚动 */
		-webkit-overflow-scrolling: touch;
		/* 使用原生滚动，提高性能 */
		position: fixed;
		/* 固定body位置，防止反弹效果 */
		width: 100%;

		/* 确保宽度覆盖全屏 height: calc(100vh - 110px); */
		.community-index {
			// height: 100vh;
			overflow-x: hidden;

			.community {
				height: 100%;

				.content-index {
					display: flex;
					width: 100%;

					.ites {
						width: auto;
						margin: 5px 15px;
						display: flex;
						justify-content: center;
					}

					.checkes {
						color: #333;
						font-weight: bold;
					}

					.dialogue {
						width: 100%;
						border-right: 1px solid #ccc;

						.item {
							width: auto;
							margin: 5px 15px;
							display: flex;
							justify-content: center;
							border: 1px solid #ccc;
							border-radius: 10px;
						}

						.checked {
							color: #333;
							font-weight: bold;
						}

					}
				}
			}

			.contentOs {
				height: calc(100vh - 105px);
				
			}
		}
	}
</style>